<script lang="ts">
import { useClipboard } from '@peng_kai/kit/libs/vueuse';
import { numberAbbreviations } from '~/utils/number';
</script>

<script lang="ts" setup>
const emits = defineEmits(['close']);
const { levelInfo } = queries.useLevelQuery();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const uidCopy = reactive(useClipboard({ source: computed(() => userInfo.value?.uid ?? ''), legacy: true }));

const percentage = computed(() => {
  if ((!userInfo.value?.play_amount) && (!userInfo.value?.next_level?.total_wager))
    return;

  const number = bignumber(userInfo.value?.play_amount ?? 0).dividedBy(bignumber(userInfo.value?.next_level?.total_wager ?? 0)).multipliedBy(100).toNumber();
  return number < 100 ? number.toFixed(2) : 100;
});

const hasClaim = computed(() => levelInfo.value?.find(l => l.status === 1)?.status);

const exp = computed(() => {
  const nextExp = bignumber(userInfo.value?.next_level?.total_wager || 0);
  const currentExp = bignumber(userInfo.value?.play_amount || 0);
  return bignumber(currentExp).dividedBy(nextExp).multipliedBy(100).toFixed();
});
</script>

<template>
  <div>
    <div
      class="mt-4 flex-center flex-col cursor-pointer" @click="(() => {
        globalPopups.userModify.open?.(),
        emits('close')
      })"
    >
      <TAvatar class="w-15" :avatar="userInfo?.avatar" :level="userInfo?.level" :percent="Number(exp)" :levelScale="0.26" />

      <div v-if="userInfo" class="mt-1 text-center">
        <div class="mb-1 text-4.5 leading-normal">
          {{ userInfo?.nickname }}
        </div>
        <div class="flex-center gap-1 text-3.5 text-sys-text-body leading-normal" @click.stop="uidCopy.copy()">
          ID:{{ userInfo?.uid }}
          <TCopy :source="userInfo?.uid" :nthParent="1" class="text-4" />
        </div>
      </div>
    </div>

    <div
      class="mt-3 cursor-pointer rounded-2 bg-sys-layer-b p-3 text-3.4" @click="(() => {
        globalPopups.rankPopup.open(),
        emits('close')
      })"
    >
      <div class="flex items-center gap-3">
        <div class="flex-1">
          <p>{{ userInfo?.vip_level?.name }}</p>
          <div class="flex-start">
            <AProgress status="normal" :percent="Number(percentage)" class="my-1" trailColor="#3E404C" strokeColor="#EAB308" />
          </div>
        </div>

        <div class="relative ml-2 flex items-center -bottom-2">
          <div :class="[hasClaim ? 'scale-120' : '']">
            <img src="../../../../assets/imgs/user/gift.png" class="block size-5" :class="[hasClaim ? '-top-2 -left-6 jump-shake' : '']">
          </div>
          <i class="i-ion:ios-arrow-forward text-4" />
        </div>
      </div>
      <div class="flex-between text-sys-text-body">
        <span>{{ $t('8azhgaNMykMTfOvD2oAb4') }}</span>
        <span>{{ numberAbbreviations(userInfo?.play_amount ?? 0) }}  / {{ numberAbbreviations(userInfo?.next_level?.total_wager ?? 0) }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.jump-shake {
  animation: jump-and-shake 3s infinite;
}

@keyframes jump-and-shake {
  30% {
    transform: rotate(0);
  }

  38% {
    transform: rotate(-15deg);
  }

  40% {
    transform: rotate(15deg);
  }

  42% {
    transform: rotate(-18deg);
  }

  44% {
    transform: rotate(18deg);
  }

  46% {
    transform: rotate(-22deg);
  }

  48% {
    transform: rotate(22deg);
  }

  50% {
    transform: rotate(-18deg);
  }

  52% {
    transform: rotate(18deg);
  }

  54% {
    transform: rotate(-12deg);
  }

  56% {
    transform: rotate(12deg);
  }

  58% {
    transform: rotate(0);
  }
}
</style>
